<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" type="text/css" href="../css/statement.css" />
	</head>

	<body>
		<div class="bottom-bow"></div>
		<div id="statement">
			<header class="mui-bar mui-bar-nav">
				<h1 class="mui-title" style="color: #fff;">报表</h1>
			</header>
			<div class="tab-list">
				<div class="list-item" v-for="(item,index) in tabList" @click="tabListClick(index)" :style="num==index?'color:#2A83FF;':''">{{item}}</div>
				<div class="tab-icon" :style="left"></div>
			</div>
			<div class="content" :style="styleObj">
				<!--
                	作者：1169774483@qq.com
                	时间：2018-06-26
                	描述：今日报表
                -->
				<div>
					<div>
						<div class="title">个人任务</div>
						<div class="desc margin-top15">总任务：{{today.personage.allTaskNumber}}个 ，已完成：{{today.personage.achieveTaskNumber}}个 ，未完成：{{today.personage.notAchieveTaskNumber}}个</div>
						<div class="chart" id="personage"></div>
					</div>
					<div>
						<div class="title">公司任务</div>
						<div class="desc margin-top15">总任务：{{today.company.allTaskNumber}}个 ，已完成：{{today.company.achieveTaskNumber}}个 ，未完成：{{today.company.notAchieveTaskNumber}}个</div>
						<div class="chart" id="department"></div>
					</div>
				</div>
				<!--
                	作者：1169774483@qq.com
                	时间：2018-06-26
                	描述：历史报表
                -->
				<div>
					<div class="time-title" @click="choiceTime">当前显示：{{time}}</div>
					<div>
						<div class="title">个人</div>
						<!--<div class="desc">总任务：{{today.personage.allTaskNumber}}个 ，已完成：{{today.personage.achieveTaskNumber}}个 ，未完成：{{today.personage.notAchieveTaskNumber}}个</div>-->
						<div class="chart margin-top15" id="historyGren"></div>
					</div>
					<div>
						<div class="title">公司</div>
						<!--<div class="desc">总任务：{{today.company.allTaskNumber}}个 ，已完成：{{today.company.achieveTaskNumber}}个 ，未完成：{{today.company.notAchieveTaskNumber}}个</div>-->
						<div class="chart margin-top15" id="historyTdui"></div>
					</div>
				</div>
			</div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/echarts-all.js"></script>
		<script src="../js/util.js"></script>
		<script src="../js/Width.js"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			mui.init()
			window.addEventListener('refresh', function(e) {
				console.log('执行吗')
				location.reload();
			});

			var userPicker = new mui.PopPicker();
			userPicker.setData([{
				value: '1',
				text: '每周'
			}, {
				value: '2',
				text: '每月'
			}, {
				value: '3',
				text: '每年'
			}, ]);

			var statement = new Vue({
				el: '#statement',
				data: {
					num: 0,
					left: 'left:16%;',
					tabList: [
						'今日',
						'历史',
					],
					time: '每周',
					value: 1,
					styleObj: {
						width: htmlWidth * 2 + 'px',
						transform: 'translateX(0)',
					},
					today: {
						personage: {},
						company: {}
					}
				},

				mounted: function() {

				},

				watch: {
					num: function(val) {
						if(val == 0) {
							this.left = 'left:15%;'
							this.styleObj.transform = 'translateX(0)'
						} else {
							this.left = 'left:66%;'
							this.styleObj.transform = 'translateX(' + -htmlWidth + 'px)'
						}
					}
				},

				methods: {
					tabListClick: function(num) {
						this.num = num
					},
					choiceTime: function() {
						var that = this
						userPicker.show(function(items) {
							that.time = items[0].text
							that.value = items[0].value
							GetHistoryReport(items[0].value) // 调用 历史报表方法
						});
					}
				}
			})

			var pieChart = echarts.init(byId('personage'));
			var department = echarts.init(byId('department'));
			var historyGren = echarts.init(byId('historyGren'));
			var historyTdui = echarts.init(byId('historyTdui'));

			mui.plusReady(function() {
				FastClick.attach(document.body);
				var self = plus.webview.currentWebview();
				self.addEventListener('show',function(){
						GetTodayReport(userID) // 获取 今日报表
				        GetHistoryReport(statement.value) // 获取 历史报表
					})
				var userID = plus.storage.getItem("userID")
				GetTodayReport(userID) // 获取 今日报表
				GetHistoryReport(1) // 获取 历史报表
			})

			function PieOption(accomplish, unfinished) {
				return {
					color: ['#75a8ef', '#FFDB5C'],
					series: [{
						type: 'pie',
						roseType: 'angle',
						radius: '65%',
						data: [{
							value: accomplish,
							name: '已完成'
						}, {
							value: unfinished,
							name: '未完成'
						}],
						itemStyle: {
							// 阴影的大小
							shadowBlur: 30,
							shadowColor: 'rgba(0, 0, 0, 0.2)'
						}
					}]
				}
			}

			function barOption(time, accomplish, unfinished) {
				return {
					color: ['#75a8ef', '#FFDB5C'],
					legend: {
						data: ['已完成', '未完成']
					},
					grid: {
						x: 35,
						x2: 10,
						y: 30,
						y2: 25
					},
					calculable: false,
					xAxis: [{
						type: 'category',
						data: time
					}],
					yAxis: [{
						type: 'value',
						splitArea: {
							show: true
						}
					}],
					series: [{
						name: '已完成',
						type: 'bar',
						data: accomplish
					}, {
						name: '未完成',
						type: 'bar',
						data: unfinished
					}]
				}

			}

			function byId(id) {
				return document.getElementById(id);
			};

			function GetTodayReport(userID) {
				mui.post(httpUrl.testUrl + '/api/Report/GetTodayReport', {
					userID
				}, function(res) {
					if(res.code === 1001) {
						var personage = res.data[0]
						var company = res.data[1]
						pieChart.setOption(PieOption(personage.achieveTaskPercentage, personage.notAchieveTaskPercentage));
						department.setOption(PieOption(company.achieveTaskPercentage, company.notAchieveTaskPercentage));
						statement.today.personage = personage;
						statement.today.company = company;
					}
				})
			}

			function GetHistoryReport(type) {
				mui.post(httpUrl.testUrl + '/api/Report/GetHistoryReport', {
					userID: plus.storage.getItem("userID"),
					type: type
				}, function(res) {
					if(res.code === 1001) {
						var personList = listForEach(res.data.personList, type)
						var corporationList = listForEach(res.data.corporationList, type)
						historyGren.setOption(barOption(personList.a, personList.b, personList.c))
						historyTdui.setOption(barOption(corporationList.a, corporationList.b, corporationList.c))
					}
				})
			}

			function listForEach(list, type) {
				var a = [],
					b = [],
					c = [],
					name
				list.forEach(function(item, index) {
					name = item.timeUnit + (type == 1 ? '周' : type == 2 ? '月' : '年')
					a.push(name);
					b.push(item.achieveTaskPercentage);
					c.push(item.notAchieveTaskPercentage);
				})
				return {
					a,
					b,
					c
				}
			}
		</script>
	</body>

</html>